<template>
  <div>
    <div id="cornerComment" v-if="detailVisible">
      <div class="cornerComment-in">
        <div class="cornerComment-in-title">
          <span>【{{ ruleData ? ruleData.name : '' }}】History</span>
          <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
        </div>
        <div class="commentBody">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="Filter time">
              <el-date-picker
                v-model="addtime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="startTime"
                end-placeholder="endTime"
                size="small"
                style="margin-right:10px;">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">search</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">reset</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="rulesList" height="400">
            <el-table-column label="createTime" prop="createTime" align="center"/>
            <el-table-column label="Record values" prop="dataValue" align="center"/>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            :layout="layout"
            @pagination="getList"
          />
        </div>
        <div class="cornerComment-in-footer">
          <el-button size="small" @click="closePOpup">cancel</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {rulesHistory} from "@/api/system/rules";

export default {
  props: ['visible', 'ruleData', 'deviceId'],
  name: "deviceDetail",
  components: {},
  data() {
    return {
      detailVisible: false,
      layout: 'total, sizes, prev, pager, next',
      ruleId: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: undefined,
        endTime: undefined
      },
      total: 0,
      addtime: [],
      rulesList: []
    }
  },
  watch: {
    visible() {
      this.detailVisible = this.visible
      if (!this.visible) {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          startTime: undefined,
          endTime: undefined
        }
        this.addtime = []
      } else {
        this.queryParams.id = this.deviceId
        this.queryParams.data = this.ruleData.columnName
        this.getList();
      }
    }
  },
  methods: {
    getList() {
      this.loading = true;
      let data_ = JSON.parse(JSON.stringify(this.queryParams))
      if (this.addtime && this.addtime.length) {
        data_.startTime = this.addtime[0] + ' 00:00:00'
        data_.endTime = this.addtime[1] + ' 23:59:59'
      }
      rulesHistory(data_).then(response => {
        console.log('数据：', response)
        for (let item of response.rows) {
          if (item.data) {
            let data_ = JSON.parse(item.data)
            item.dataValue = data_[this.ruleData.name] || 0
          }
        }
        this.rulesList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    chooseRule(row) {
      this.closePOpup()
    },
    /** reset按钮操作 */
    resetQuery() {
      this.addtime = []
      this.handleQuery();
    },
    /** search按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    closePOpup() {
      this.$emit('update:visible', false)
    },
    showRuleFn(rowId) {
    },
    /** delete按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认delete规则编号为"' + row.id + '"的数据项？').then(function () {
        return delRules(row.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("delete成功");
      }).catch(() => {
      });
    },
  }
}
</script>

<style scoped>
.Json-list {
  border: 1px solid #eee;
  padding: 10px;
}

.Json-list-line {
  display: flex;
  align-items: center;
}

.w-150 {
  width: 150px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.cornerComment-in {
  width: 700px;
  /*height: 55%;*/
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.Json-small-list {
  background: #eee;
  padding: 10px;
  margin-top: 10px;
}
</style>
